<template>
  <section class="content">
    <li v-for="le in line">
      <div class="line-item">
        <h3 class="line-header">{{le.title}}</h3>
        <div class="line-body" v-if="le.body" v-html="le.body">
        </div>
      </div>
    </li>
      <!-- END timeline item -->

    <div class="row center-block">
      <h2>movie dataset</h2>
      <div class="col-md-12">
        <div class="box">
          <div class="box-header">
            <!-- <h3 class="box-title">movie data</h3> -->
          </div>
          <!-- /.box-header -->
          <div class="box-body">
            <div class="dataTables_wrapper form-inline dt-bootstrap" id="example1_wrapper">
              <div class="row">
                <div class="col-sm-6">
                  <div id="example1_length" class="dataTables_length">

                  </div>
                </div>
              </div>

              <div class="row">
                <div class="col-sm-12 table-responsive">
                  <table aria-describedby="example1_info" role="grid" id="example1" class="table table-bordered table-striped dataTable">
                    <thead>
                      <tr role="row">
                        <th style="width: 160px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting_asc">电影名</th>
                        <th style="width: 80px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">上映年份</th>
                        <th style="width: 120px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">国家</th>
                        <th style="width: 120px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">类型</th>
                        <th style="width: 40px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">评分</th>
                        <th style="width: 80px;" colspan="1" rowspan="1" aria-controls="example1" tabindex="0" class="sorting">短评人数</th>
                      </tr>
                    </thead>
                    <tbody v-for="(data, index) in movieList" :key="index">
                      <tr role="row">
                        <td class="sorting_1">{{ data.名称 }}</td>
                        <td>{{ data.年份 }}</td>
                        <td>{{ data.国别 }}</td>
                        <td>{{ data.类型 }}</td>
                        <td>{{ data.评分 }}</td>
                        <td>{{ data.短评数 }}</td>
                      </tr>
                    </tbody>
                    <tfoot>
                      <tr>
                        <th colspan="1" rowspan="1">name</th>
                        <th colspan="1" rowspan="1">year</th>
                        <th colspan="1" rowspan="1">country</th>
                        <th colspan="1" rowspan="1">type</th>
                        <th colspan="1" rowspan="1">grade</th>
                        <th colspan="1" rowspan="1">quantity</th>
                      </tr>
                    </tfoot>
                  </table>
                </div>
              </div>
            </div>
            <!-- /.box-body -->
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import axios from 'axios'
import $ from 'jquery'
import { line } from '../../demo'
// Require needed datatables modules
require('datatables.net')
require('datatables.net-bs')

const d3 = require('d3-dsv')

export default {
  name: 'Tables',
  data () {
    return {
      movieList: []
    }
  },
  computed: {
    line () {
      return line
    }
  },
  mounted() {
    axios.get('/static/data/movie.csv').then(res => {
      var ret = d3.csvParse(res.data)
      // console.log(ret)
      this.movieList = ret
    })

    this.$nextTick(() => {
      $('#example1').DataTable()
    })
  }
}
</script>

<style>
/* Using the bootstrap style, but overriding the font to not draw in
   the Glyphicons Halflings font as an additional requirement for sorting icons.

   An alternative to the solution active below is to use the jquery style
   which uses images, but the color on the images does not match adminlte.

@import url('/static/js/plugins/datatables/jquery.dataTables.min.css');
*/

@import url('/static/js/plugins/datatables/dataTables.bootstrap.css');

table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
  font-family: 'FontAwesome';
}

table.dataTable thead .sorting:after {
  content: '\f0dc';
}

table.dataTable thead .sorting_asc:after {
  content: '\f0dd';
}

table.dataTable thead .sorting_desc:after {
  content: '\f0de';
}
</style>
